<template>
    <div class="flex items-center pl-36px pt-26px pr-26px text-14px font-bold level-2-title">
        自定义关键词
    </div>
    <div class="pl-26px pr-26px pt-20px pb-26px">
        <el-row :gutter="26">
            <el-col :span="12">
                <div class="words-item">
                    <div class="words-item__list mt-3px !h-220px">
                        <el-input v-model="state.cusKeyWords" :rows="10" type="textarea" @blur="handleBlur()" placeholder="请输入自定义关键词，一行代表一个关键词"
                        @keyup.enter.native="handleEnter()" />
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
const props = defineProps<{
    ruleForm: any
}>()

//自定义关键词

const state = reactive({
    cusKeyWords: '',
})

function handleEnter() {
    let lines = state.cusKeyWords.split('\n')
    lines = lines.filter(item => item !== "")   //去除空字符串
    lines = [...new Set(lines)]     //去重

    if (lines.length === 0) {
        return false
    }else{
        props.ruleForm.cusKeyword = lines.join('/')
    }
}

function handleBlur(){
    handleEnter()
}


watch(() => props.ruleForm.cusKeyword,() => {
    if (props.ruleForm.cusKeyword.length > 0 && state.cusKeyWords == '') {
        state.cusKeyWords = props.ruleForm.cusKeyword.split('/').join('\n')
    }
})

</script>

<style scoped></style>